<template>
  <a-layout>
    <a-layout-header class="bg-white admin-content-header">
      <div class="col-4 admin-tiao-left">
        <span>{{ $route.name }}</span>
      </div>
      <div class="col-8 text-right">
        <el-button type="primary" @click="dialogFormVisible = true" plain>添加/移除课程</el-button>
      </div>
      <el-dialog title="添加课程" center :visible.sync="dialogFormVisible">
        <changemodel
          v-bind="{ allData:getCourse, selectDate, clickdata, group: getCatebag , groupdata }"
        ></changemodel>
      </el-dialog>
    </a-layout-header>
    <a-layout-content class="admin-content-table">
      <el-table height="100%" :data="tableDate" style="width: 100%">
        <el-table-column fixed prop="name" label="名称"></el-table-column>
        <el-table-column prop="introduction" label="简介" width="120"></el-table-column>
        <el-table-column prop="courseType" label="类型" width="150"></el-table-column>
        <el-table-column label="操作" width="240">
          <template slot="header">
            <input class="el-input__inner" v-model="search" placeholder="请输入内容" />
          </template>
          <template slot-scope="scope">
            <el-button
              @click="clickdata(scope.row)"
              icon="el-icon-delete"
              type="danger"
              title="删除"
              size="small"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </a-layout-content>
    <adminContentFooter
      v-bind="{handleSizeChange, handleCurrentChange, currentPage, pagesize,data: searchDate}"
    ></adminContentFooter>
  </a-layout>
</template>

<script>
import {
  asyncgetcoursepasswordgroupbygroupid,
  asynccreatecoursepasswordgroup
} from "../../../plugins/api.js";
import { mapGetters } from "vuex";
import adminContentFooter from "../../../components/admin/admin-content-footer";
import changemodel from "../../../components/admin/changemodel";
export default {
  components: {
    adminContentFooter,
    changemodel
  },
  data() {
    return {
      course: [],
      dialogFormVisible: false,
      currentPage: 1,
      pagesize: 10,
      search: ""
    };
  },
  watch: {
    $route() {
      this.start();
    }
  },
  async mounted() {
    this.start();
  },
  computed: {
    ...mapGetters(["getCourse", "getCatebag", "getCoursecatebag"]),
    groupdata() {
      return this.getCoursecatebag.map(({ ID, cid, catebagid }) => {
        return { ID, groupid: catebagid, childid: cid };
      });
    },
    tableDate() {
      const { currentPage, pagesize, searchDate } = this;
      return searchDate.slice(
        (currentPage - 1) * pagesize,
        currentPage * pagesize
      );
    },
    searchDate() {
      const { search, selectDate } = this;
      return selectDate.filter(
        data =>
          !search || data.name.toLowerCase().includes(search.toLowerCase())
      );
    },
    selectDate() {
      const { course, getCourse } = this;
      return getCourse.filter(data => course.find(v => v.cid == data.ID));
    },
    ID() {
      return this.$route.query.ID;
    }
  },
  methods: {
    async start() {
      let id = this.ID;
      this.course = await asyncgetcoursepasswordgroupbygroupid({
        passwordgroupid: id
      });
    },
    async clickdata({ ID }) {
      await asynccreatecoursepasswordgroup({
        cid: ID,
        passwordgroupid: this.ID
      });
      await this.start();
      this.$message({
        message: "恭喜你，这是一条成功消息",
        type: "success"
      });
    },
    handleSizeChange(val) {
      this.pagesize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    }
  }
};
</script>
